@import '/src/styles/variables/mixins';

// base style======================================================================
.body1 {
  @include typography;
}

// variants ========================================================================
.large {
  font: var(--font-large);
}

.h1 {
  font: var(--font-h1);
}

.h2 {
  font: var(--font-h2);
}

.h3 {
  font: var(--font-h3);
}

.bold16 {
  font: var(--font-bold-16);
}

.regular16 {
  font: var(--font-regular-16);
}

.bold14 {
  font: var(--font-bold-14);
}

.medium14 {
  font: var(--font-medium-14);
}

.medium16 {
  font: var(--font-medium-16);
}

.regular14 {
  font: var(--font-regular-14);
}

.bold-small {
  font: var(--font-bold-small);
}

.small {
  font: var(--font-small);
}

.link-small {
  font: var(--font-small-link);
}

.regular-link {
  font: var(--font-regular-link);
}

.error {
  @include typography(
    $fs: var(--font-size-xs),
    $lh: var(--line-height-m),
    $color: var(--color-danger-300)
  );
}

// colors ================================================================================

.primary {
  color: var(--color-primary-500);
}

.secondary {
  color: var(--color-dark-900);
}

.inherit {
  color: inherit;
}

.success {
  color: var(--color-success-500);
}

.color {
  color: var(--color-danger-300);
}

.light {
  color: var(--color-light-100);
}

.form {
  color: var(--color-light-900);
}
